<template>
  <div>
    <el-form :inline="true" :model="Searchdata" class="demo-form-inline">
      <el-form-item label="耳号:" style="margin-left: 30px;">
        <el-input v-model="Searchdata.earnumber" clearable style="width: 200px" />
      </el-form-item>
      <el-form-item label="对应品种:">
        <el-select v-model="Searchdata.breed" clearable style="width: 200px">
          <el-option v-for="item in breed" :key="item.value" :label="item.name" :value="item.value" />
        </el-select>
      </el-form-item>
      <el-form-item label="对应出生状态:">
        <el-select v-model="Searchdata.statebirth" clearable style="width: 200px">
          <el-option v-for="item in statebirth" :key="item.value" :label="item.name" :value="item.value" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="danger" @click="EarList()">查询</el-button>
        <el-button>重置</el-button>
      </el-form-item>
    </el-form>
    <el-form-item label="使用状态:">
      <el-select v-model="Searchdata.usecondition" clearable style="width: 200px">
        <el-option v-for="item in usecondition " :key="item.value" :label="item.name" :value="item.value" />
      </el-select>
    </el-form-item>
    <el-form-item>
      <el-button @click="dialogVisible = true" type="danger" :icon="Plus">
      新增
    </el-button>
    <el-button type="danger" @click="Alldel">
      删除
    </el-button>
    </el-form-item>
    <el-table :data="Ear" border style="width: 100%" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" />
      <el-table-column type="index" :index="indexMethod" label="序号" />
      <el-table-column prop="earNumber" label="耳号" align="center" />
      <el-table-column prop="breed" label="对应品种" align="center">
        <template v-slot="scope">
          <span v-if="scope.row.breed == 1">杜泊</span>
          <span v-if="scope.row.breed == 2">澳洲白</span>
          <span v-if="scope.row.breed == 3">萨福克</span>
          <span v-if="scope.row.breed == 4">杜湖</span>
          <span v-if="scope.row.breed == 5">杜杜湖</span>
          <span v-if="scope.row.breed == 6">萨杜湖</span>
          <span v-if="scope.row.breed == 7">澳湖</span>
          <span v-if="scope.row.breed == 8">湖羊</span>
          <span v-if="scope.row.breed == 9">澳杜湖</span>
        </template>
      </el-table-column>
      <el-table-column prop="insertType" label="对应出生状态" align="center">
        <template v-slot="scope">
          <span v-if="scope.row.stateBirth == 1">活羔</span>
          <span v-if="scope.row.stateBirth == 2">健羔</span>
          <span v-if="scope.row.stateBirth == 3">弱羔</span>
          <span v-if="scope.row.stateBirth == 4">畸形</span>
          <span v-if="scope.row.stateBirth == 5">死胎</span>
          <span v-if="scope.row.stateBirth == 6">木乃伊</span>
          <span v-if="scope.row.stateBirth == 7">畸形</span>
        </template>
      </el-table-column>
      <el-table-column prop="storageDate" label="入库日期" align="center">
        <template v-slot="scope">
          {{ scope.row.storageDate.substr(0, 10) }}
        </template>
      </el-table-column>
      <el-table-column prop="useCondition" label="使用状态" align="center">
        <template v-slot="scope">
          <span v-if="scope.row.useCondition == 1">已使用</span>
          <span v-if="scope.row.useCondition == 2">未使用</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template v-slot="scope">
          <el-link type="primary" @click="Find(scope.row.id)">编辑</el-link>&nbsp;
          <el-link type="primary" @click="deletes(scope.row.id)">删除</el-link>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog v-model="dialogVisible">
      <span style="margin-left: 400px;">产羔耳标管理-新增</span>
      <el-form inline="true" :model="form">
          <el-form-item>
          <el-button type="danger" @click="submitForm(ruleFormRef)">保存</el-button>
        </el-form-item>
      </el-form>
      <el-form ref="ruleFormRef" style="max-width: 600px" :model="form" :rules="rules" label-width="auto"
        class="demo-ruleForm" status-icon>
        <el-form-item label="入库日期" prop="storageDate">
          <el-date-picker v-model="form.storageDate" type="date" style="width: 200px"  value-format="YYYY-MM-DD" />
        </el-form-item>
        <el-form-item label="对应出生状态:" prop="stateBirth">
          <el-select v-model="form.stateBirth" clearable style="width: 200px">
            <el-option v-for="item in statebirth" :key="item.value" :label="item.name" :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="对应品种:" prop="breed">
          <el-select v-model="form.breed" clearable style="width: 200px">
            <el-option v-for="item in breed" :key="item.value" :label="item.name" :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="添加方式:" prop="addmode">
          <el-radio-group v-model="form.addmode" class="ml-4">
            <el-radio :value="true" checked>单个新增</el-radio>
            <el-radio :value="false">批量新增</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="耳号:" prop="earNumber" v-if="form.addmode" >
          <el-input v-model="form.earNumber" style="width: 200px" />
        </el-form-item>
        <el-form-item label="耳号前缀:" prop="earprefix" v-if="!form.addmode">
          <el-input v-model="form.earprefix" style="width: 200px" />
        </el-form-item>
        <el-form-item label="开始耳号:" prop="startinglug" v-if="!form.addmode">
          <el-input v-model="form.startinglug" style="width: 200px" />
        </el-form-item>
        <el-form-item label="耳号数量:" prop="earnumbers" v-if="!form.addmode">
          <el-input v-model="form.earnumbers" style="width: 200px" />
        </el-form-item>
        <el-form-item>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
        </div>
      </template>
    </el-dialog>
    <el-dialog v-model="dialogVisible1">
      <span style="margin-left: 400px;">产羔耳标管理-修改</span>
      <el-form inline="true">
        <el-form-item>
          <el-button type="danger" :icon="Plus">新增</el-button>
          <el-button type="danger" @click="submitForm1(ruleFormRef)">修改</el-button>
          <el-button type="danger">撤销</el-button>
          <el-button type="danger" :icon="Delete">删除</el-button>
        </el-form-item>
      </el-form>
      <el-form ref="ruleFormRef" style="max-width: 600px" :model="form1" :rules="rules" label-width="auto"
        class="demo-ruleForm" status-icon>
        <el-form-item label="入库日期" prop="storageDate">
          <el-date-picker v-model="form1.storageDate" type="date" style="width: 200px" />
        </el-form-item>
        <el-form-item label="对应出生状态:" prop="stateBirth">
          <el-select v-model="form1.stateBirth" clearable style="width: 200px">
            <el-option v-for="item in statebirth" :key="item.value" :label="item.name" :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="对应品种:" prop="breed">
          <el-select v-model="form1.breed" clearable style="width: 200px">
            <el-option v-for="item in breed" :key="item.value" :label="item.name" :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="耳号:" prop="earNumber" >
          <el-input v-model="form1.earNumber" tyle="width: 200px" />
        </el-form-item>
        <el-form-item>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
        </div>
      </template>
    </el-dialog>
    <table style="width: 300px;margin: 5px auto;">
      <tr>
        <td>
          <el-pagination v-model:current-page="page.pindex" v-model:page-size="page.psize"
            :page-sizes="[15, 20, 30, 40]" :background="true" layout=" slot,total, sizes, prev, pager, next, jumper"
            :total="page.totalCount" @size-change="handleSizeChange" @current-change="handleCurrentChange"
            prev-text="上一页" next-text="下一页" />
        </td>
      </tr>
    </table>
  </div>
</template>
<script setup lang="ts">
import axios from "axios";
import {reactive,ref,onMounted} from "vue"
import { ElMessage,ElMessageBox } from "element-plus";
import type { ComponentSize, FormInstance, FormRules } from 'element-plus'
import http from  "@/http"
import {
  Check,
  Delete,
  Edit,
  Message,
  Search,
  Star,
  Plus
} from '@element-plus/icons-vue'
const Ear=ref()
const Ears=ref()
const dialogVisible = ref(false)
const dialogVisible1 = ref(false)
const ruleFormRef = ref<FormInstance>()
//序号
const indexMethod = (index: number) => {
  var count=(page.pindex-1)*page.psize;
  for(let i=0;i<page.pageCount;i++){
    return index+count+1
  }
}
//产羔删除
const deletes=(id:number)=>{
  ElMessageBox.confirm(
    '确认删除吗?',
    '警告',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'error',
    }
  )
    .then(() => {
      http.delete("Mroute/api/LamBing/LamBingDelete?id="+id).then(res=>{
    if(res.data>0){
      ElMessage.success('删除成功');
      EarList();
    }
    else{
      ElMessage.error('删除失败')
    }
  })
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: 'Delete canceled',
      })
    })
}
//产羔表单
const form=reactive({
  "earNumber": "",
  stateBirth: "",
  breed: "",
  storageDate: "",
  addmode: true,
  earprefix: null,
  startinglug: null,
  earnumbers: null,
  useCondition: 2,
})
//产羔表单
const form1=reactive({
  id: 0,
  stateBirth: "",
  breed: "",
  earNumber: "",
  storageDate: "",
  isDel: false,
  useCondition: "",
})
const handleSizeChange = (val: number) => {
  page.psize=val;
  EarList();
}
const handleCurrentChange = (val: number) => {
  page.pindex=val;
  EarList();
}
//查询条件
const Searchdata=reactive({
  breed:"",
  statebirth:"",
  usecondition:"",
  earnumber:""
})
//复选框
const handleSelectionChange = (val: any) => {
  refs.value = val
}
//验证
const rules = reactive<FormRules>({
  storageDate: [
    { required: true, message: '入库日期不能为空', trigger: 'blur' },
  ],
  stateBirth: [
    { required: true, message: '出生状态不能为空', trigger: 'blur' },
  ],
  breed: [
    { required: true, message: '对应品种不能为空', trigger: 'blur' },
  ],
  earNumber: [
    { required: true, message: '耳号不能为空', trigger: 'blur' },
  ],
  earprefix: [
    { required: true, message: '耳号前缀不能为空', trigger: 'blur' },
  ],
  startinglug: [
    { required: true, message: '开始耳号不能为空', trigger: 'blur' },
  ],
  earnumbers: [
    { required: true, message: '耳号数量不能为空', trigger: 'blur' },
  ],
})
//品种
const options=ref();
//出生状态
const optionss=ref();
//使用状态
const optionsss=ref()
//分页
const page=reactive({
    pindex:1,
    psize:15,
    totalCount:0,
    pageCount:0,
})
//品种
const breed=ref()
//品种下拉
const breedlist=()=>{
  http.get("MYroute/api/LamBing/GetBreed").then(res=>{
    breed.value=res.data;
  })
}
//对应出生状态
const statebirth=ref()
//对应出生状态下拉
const statebirthlist=()=>{
  http.get("MYroute/api/LamBing/GetinsertType").then(res=>{
    statebirth.value=res.data;
  })
}
const addmode=ref(true)
//使用状态
const usecondition=ref()
//使用状态下拉
const useconditionlist=()=>{
  http.get("MYroute/api/LamBing/Getusecondition").then(res=>{
    usecondition.value=res.data;
  })
}
//添加
const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
        http.post("Mroute/api/LamBing/LamBingCreate",form).then(res=>{
        if(res.data>0){
          ElMessage.success('添加成功');
          dialogVisible.value=false;
        EarList();
        form.breed="";
        form.earNumber="";
        form.stateBirth="";
        form.storageDate="";
        }
        else if(res.data==-1){
          ElMessage.success('该耳号已存在');
        }
        else if(res.data==-2){
          ElMessage.error('耳号不能重复')
        }
        else{
          ElMessage.error('添加失败');
        }

      })
    } else {
      console.log('error submit!', fields)
    }
  })
  
}
const Find=(id:number)=>{
  dialogVisible1.value = true;
  http.get("MYroute/api/LamBing/LamBingFind?id="+id).then(res=>{
    form1.id=res.data.id;
    form1.stateBirth=res.data.stateBirth;
    statebirthlist();
    form1.breed=res.data.breed;
    breedlist();
    form1.earNumber=res.data.earNumber;
    form1.storageDate=res.data.storageDate;
    form1.isDel=res.data.isDel;
    form1.useCondition=res.data.useCondition;
    useconditionlist();
    
  })
}
//修改
const submitForm1 = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
        http.put("Mroute/api/LamBing/LamBingUpdate",form1).then(res=>{
        if(res.data>0){
          ElMessage.success('修改成功');
          dialogVisible1.value=false;
          EarList();
        form1.breed="";
        form1.earNumber="";
        form1.stateBirth="";
        form1.storageDate="";
        }
        else if(res.data==-1){
          ElMessage.success('该耳号已存在');
        }
        else{
          ElMessage.error('修改失败');
        }
      })
    } else {
      console.log('error submit!', fields)
    }
  })
  
}
//产羔耳标显示
const EarList=()=>{
    http.get("MYroute/api/LamBing/LamBingGet",{
        params:{
          breed:Searchdata.breed || undefined,
          statebirth:Searchdata.statebirth || undefined,
          usecondition:Searchdata.usecondition || undefined,
          earnumber:Searchdata.earnumber,
          pindex:page.pindex,
          psize:page.psize
        }
    }).then(res=>{
        Ear.value=res.data.list;
        page.totalCount=res.data.totalCount;
        page.pageCount=res.data.pageCount;
    })
}
const refs=ref([])
const Alldel=()=>{
  var id=refs.value.map(x=>x.id)
  if(refs.value.length==0){
      ElMessage.error("至少选择一项");
      return;
  }

  ElMessageBox.confirm(
    '确认删除吗?',
    '警告',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'error',
    }
  ) 
    .then(() => {
     http.put("Mroute/api/LamBing/LamBingAllDel?ids="+id).then(res=>{
        if(res.data>0){
            ElMessage.success('删除成功');
            EarList()
        }
        else{
            ElMessage.error('删除失败');
        }
     })
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: 'Delete canceled',
      })
    })
}

onMounted(()=>{
    EarList(),
    breedlist(),
    statebirthlist(),
    useconditionlist()
})

</script>
<style></style>